<template>
  <div class="login-container" @keyup.enter="handleLogin">
    <div class="login-time">
      {{ time }}
    </div>
    <div class="login-wrapper">
      <div class="login-left animate__animated animate__fadeInLeft">
        <img class="img" src="/img/logo.png" alt="">
        <p class="title">{{ $t('login.info') }}</p>
      </div>
      <div class="login-border animate__animated animate__fadeInRight">
        <div class="login-main">
          <div class="lock-form animate__animated animate__bounceInDown">
            <div class="animate__animated" :class="{'shake':passwdError,'animate__bounceOut':pass}">
              <h3 style="color:#333">{{ userInfo.username }}</h3>
              <el-input placeholder="请输入登录密码"
                        type="password"
                        class="input-with-select animated"
                        v-model="passwd"
                        @keyup.enter="handleLogin">
                <template v-slot:append>
                  <i class="icon-bofangqi-suoping" @click="handleLogin"></i>
                  &nbsp; &nbsp;
                  <i class="icon-tuichu" @click="handleLogout"></i>
                </template>
              </el-input>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>

import {useUserStore} from "@/store/modules/user.js";
import {useCommonStore} from "@/store/modules/common.js";
import {useNavsStore} from "@/store/modules/tags.js";
import {useRouter, useRoute} from 'vue-router'
import {getCurrentInstance} from "vue"
import {ElMessage,ElMessageBox} from "element-plus"

const cxt = getCurrentInstance()

defineOptions({
  name: "lock",
})

const time = ref("")
const passwd = ref("")
const passwdError = ref(false)
const pass = ref(false)

const optionData = reactive({
  time, passwd, passwdError, pass
})

function created() {
  getTime();
  setInterval(() => {
    getTime();
  }, 1000);
}

created()

const userInfo = computed(() => {
  const userStore = useUserStore();
  return userStore.userInfo

})
const lockPasswd = computed(() => {
  const commonStore = useCommonStore();
  return commonStore.lockPasswd
})
const tag = computed(() => {
  const navsStore = useNavsStore();
  return navsStore.tag
})

const route = useRoute();
const router = useRouter();

function getTime() {
  const dayjs = cxt.appContext.config.globalProperties.$dayjs
  optionData.time = dayjs().format('YYYY年MM月DD日 HH:mm:ss')
}

function handleLogout() {
  ElMessageBox.confirm("是否退出系统, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    const userStore = useUserStore()
    userStore.LogOut().then(() => {
      router.push({path: "/login"});
    });
  });
}

function handleLogin() {
  if (optionData.passwd != lockPasswd.value) {
    optionData.passwd = "";
    ElMessage({
      message: "解锁密码错误,请重新输入",
      type: "error"
    });
    optionData.passwdError = true;
    setTimeout(() => {
      optionData.passwdError = false;
    }, 1000);
    return;
  }
  optionData.pass = true;
  setTimeout(() => {
    const commonStore = useCommonStore()
    commonStore.CLEAR_LOCK();
    console.log("tag",tag)
    router.push({
      path: tag.value.value
    });
  }, 1000);
}
</script>

<style lang="scss">
</style>